<template>
  <div class="register">
    <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
    <Logo />
    <!-- 可以使用 CellGroup 作为容器
          文本框部分
       -->
    <van-cell-group class="word">
      <van-field v-model="username" label="用户名" placeholder="请输入用户名" />
      <van-field
        v-model="password"
        type="password"
        label="密码"
        placeholder="请输入密码"
      />
    </van-cell-group>
    <van-button type="danger" class="btn" @click="registerThing"
      >注册</van-button
    >
  </div>
</template>

<script setup  name="register">
import Logo from "@/components/Logo.vue";
import { registerInfo } from "@/api/user.js";
import { encryptO } from "@/utils/crypto.js";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
let username = ref("");
let password = ref("");
let router = useRouter();
const onClickLeft = () => history.back();
function registerThing() {
  let newWord = encryptO(password.value);
  registerInfo({
    userName: username.value,
    passWord: newWord,
  })
    .then((res) => {
      console.log("Register success", res);
      if (res.accessToken) {
        showSuccessToast("成功注册");
        router.push("/login");
      }
    })
    .catch((err) => {
      console.error("Login failed", err);
    });
}
</script>
<style lang="scss" scoped>
.register {
  width: 100vw;
  .word {
    width: 80%;
    margin-top: -100px;
    margin-left: 113px;
  }
  .btn {
    width: 66%;
    margin-left: 25%;
    margin-top: 30px;
  }
  .tips {
    color: purple;
    margin-left: 41%;
    margin-top: 40px;
  }
  ::v-deep .van-nav-bar .van-icon {
    color: black;
  }
  ::v-deep .van-nav-bar__text {
    color: black;
  }
}
</style>
